<template>
  <scroll-page :loading="loading" :offset="offset" :no-data="noData" v-on:load="load">
    <el-row class="article-list">
      <el-col class="scroll-item" v-for="(item, index) in articles" :key='index' :span="24" v-scroll-reveal.reset>
        <el-card shadow="always">
            <h5>
              <!-- <router-link tag="el-link"  :to="{ name: 'article', query:{id:item.id}}">{{item.title}}</router-link> -->
              <el-link @click="view(item.id)" target="_blank">{{item.name}}</el-link>
            </h5>
            <el-row class="bar">
                <div class="col"><i class="el-icon-user"></i><span>作者</span><span>Mr.Yong</span></div>
                <div class="col right"><i class="el-icon-time"></i><span>发表于</span><span>{{item.create_time}}</span></div>
                <div class="col"><i class="el-icon-s-unfold"></i><span>分类</span><span><a href="#">{{item.cate_name}}</a></span> |</div>
                <div class="col"><i class="el-icon-view"></i><span>阅读量</span><span>{{item.clicks}}</span> |</div>
                <div class="col"><i class="el-icon-chat-dot-round"></i><span>评论数</span><span>{{item.comments || 0}}</span></div>
            </el-row>
            <el-row class="desc">
                <p>{{item.description}}</p>
            </el-row>
            <el-row class="more">
                <span class="el-tag el-tag--success el-tag--mini" @click="to_tag(tag.id)" v-for="tag in item.tags" :key='tag.id' >{{tag.name}}</span>
            </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :class="isShow">没有更多了~</el-row>
  </scroll-page>
</template>

<script>
import Article from './AricleList'
import ScrollPage from './ScrpllPage'
import {getArticleList} from '@/api/article';
export default {
    name: 'ArticleScrollPage',
    props: {
        offset: {
            type: Number,
            default: 100
        },
        page: {
            type: Object,
            default() {
                return {}
            }
        },
        query: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    watch: {
        'query': {
            handler() {
                this.noData = false
                this.articles = []
                this.innerPage.pageNo = 1
                this.getArticles()
            },
            deep: true
        },
        'page': {
            handler() {
                this.noData = false
                this.articles = []
                this.innerPage = this.page
                this.getArticles()
            },
            deep: true
        },
        // articles: function() {
        //     /*DOM还没更新*/
        //     var target = this;
        //     target.$nextTick(function(){
        //         /*现在数据已经渲染完毕*/
        //         target.scrollReveal.reveal('.list-item',{
        //             reset: true,
        //             // distance: '50px',
        //             // origin: 'left',
        //             duration: 1000,
        //             // easing:'linear',
        //         })
        //     })
        // },
    },
    data () {
        return {
            loading: false,
            noData: false,
            innerPage: {
                pageSize: 10,
                pageNo: 1,
            },
            articles: [],
            isShow:'hide'
        }
    },
    components:{
        Article,
        ScrollPage
    },
    created() {
      this.getArticles()
    },
    methods:{
        load() {
            this.getArticles()
        },
        view(id) {
            this.$router.push({path: `/view/${id}`})
        },
        to_tag(id) {
            this.$router.push({path: `/tag/${id}`})
        },
        getArticles() {
            let that = this
            that.loading = true
            that.query.page = that.innerPage.pageNo;
            that.query.size = that.innerPage.pageSize;
            getArticleList(that.query).then(res => {
                let newArticles = res.data
                if (newArticles && newArticles.length > 0) {
                    that.innerPage.pageNo += 1
                    that.articles = that.articles.concat(newArticles)
                    that.isShow = 'hide'
                    
                } else {
                    that.noData = true
                    that.isShow = 'show'
                }
            }).catch(error => {
                if (error !== 'error') {
                    that.$message({type: 'error', message: '文章加载失败!', showClose: true})
                }
            }).finally(() => {
                that.loading = false
            })
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.show
    display block
    text-align center
.hide
    display none
.article-list
    width 100%
    // margin 10px 0px
    cursor pointer
    opacity 0.9
    .el-col
        margin 20px 0
        animate-duration 2s   //动画持续时间
        animate-delay 1s    //动画延迟时间
        animate-iteration-count 1    //动画执行次数
        .el-card
            width 100%
            text-align left 
            h5
                color #555
                .el-link
                    font-size 26px
                    font-weight 400 
            .bar
                width 100%
                font-size 12px
                color #999
                padding 10px 0
                .col
                    display inline-block
                    i
                        margin-right 5px
                    span
                        margin-right 5px
            .desc
                width 100%
                color #555
                font-size 16px
                line-height 2
                padding 10px 0
                p
                    display block;
                    height 70px;
                    overflow hidden
                    text-overflow: -o-ellipsis-lastline;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
            .more
                text-align left  
                font-size 12px
                color #999
                .el-tag
                    margin-left 5px;
                .el-link
                    font-size 16px

.article-list h5 .el-link >>> .el-link--inner
    width 100%
    height 40px
    overflow hidden
    text-overflow ellipsis
    -webkit-box-orient vertical
    -webkit-line-clamp 1
    display -webkit-box
    clear both
    text-align left 
</style>
